<template>
    <div>
        <div class="item-wrapper">
            <div class='item'>总数：
                <strong>{{totalNum}}</strong>
            </div>
            <div class='item'>总价：
                <strong>{{totalPrice}}</strong>
            </div>
            <el-button  size="mini" type="primary"
          @click="remove()" >清空购物车</el-button>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'info',
  data() {
    return { };
  },
  computed:{
    ...mapGetters(['totalPrice','totalNum'])
  },
  methods:{
    ...mapActions(['remove'])
  }
};
</script>

<style scoped>
.item-wrapper {
  display: flex;
  background-color: #dfdfdf;
  align-items: center;
  justify-content: center;
}

.item {
  flex: 1;
}
</style>